import React, { useEffect, useState } from 'react';
import { Statistic, Card, Row, Col } from 'antd';

import { getDashBoard } from '@/services/dashboard';
const Dashboard = (props) => {
  const [state, setstate] = useState({});
  useEffect(async () => {
    const data = await getDashBoard();
    setstate(data);
  }, []);

  return (
    <div className="site-statistic-demo-card">
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic
              title="用户数量"
              value={state.users_count}
              precision={2}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="商品数量"
              value={state.goods_count}
              precision={2}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="订单数据"
              value={state.order_count}
              precision={2}
              valueStyle={{ color: '#234abc' }}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;
